<template>
    <vxe-modal v-model="userManagerStore.isShowDetailModel"
        :min-width="500"
        :width="800"
        :height="500"
        esc-closable
        show-footer
        show-confirm-button
        title="用户详细信息">
        <vxe-form
            ref="formRef"
            border
            title-background
            title-align="left"
            title-width="110"
            title-overflow
            :data="userInfo">

            <!-- 用户编号 -->
            <vxe-form-item title="用户编号"
                field="userId"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户在系统中的唯一编号', icon: 'vxe-icon-num-list' }">
                <template #default>
                    {{ userInfo.userId }}
                </template>
            </vxe-form-item>

            <!-- 用户名称 -->
            <vxe-form-item title="用户名称"
                field="userName"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户名称', icon: 'vxe-icon-user' }">
                <template #default>
                    {{ userInfo.userName }}
                </template>
            </vxe-form-item>

            <!-- 用户账号 -->
            <vxe-form-item title="账号"
                field="account"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户的登录账号', icon: 'vxe-icon-unlock' }">
                <template #default>
                    {{ userInfo.account }}
                </template>
            </vxe-form-item>

            <!-- 所属机构 -->
            <vxe-form-item title="所属机构"
                field="orgInfo"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户所属的机构', icon: 'vxe-icon-flow-branch' }">
                <template #default>
                    {{ userInfo.organizationInfo?.orgName }}
                </template>
            </vxe-form-item>

            <!-- 用户邮箱 -->
            <vxe-form-item title="用户邮箱"
                field="userEmail"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户邮箱信息', icon: 'vxe-icon-envelope' }">
                <template #default>
                    {{ userInfo.userEmail }}
                </template>
            </vxe-form-item>
        </vxe-form>
    </vxe-modal>
</template>

<script setup lang="ts">
import {UserInfoVO} from "@/entiy/vo/UserInfoVO.ts";
import {useUserManagerStore} from "@/store/UseUserManagerStore.ts";

const userManagerStore = useUserManagerStore();

defineProps<({
    userInfo: UserInfoVO,
})>();
</script>

<style scoped lang="scss">

</style>
